<template>
  <div class="roleUserListWarp">
    <div class="listTab">
      <div class="leftTab">
        <div
          v-if="isShow('system:user:list')"
          :class="['user', userActive == 'user' ? 'userActive' : '']"
          @click="switchTab('user')"
        >
          用户
        </div>
        <div
          v-if="isShow('system:role:list')"
          :class="['role', userActive == 'role' ? 'roleActive' : '']"
          @click="switchTab('role')"
        >
          角色
        </div>
      </div>
      <div
        class="rightAdd"
        @click="add"
        v-if="
          isShow(userActive == 'user' ? 'system:user:add' : 'system:role:add')
        "
      >
        +{{ userActive == 'user' ? '新增用户' : '新增角色' }}
      </div>
    </div>
    <div class="listHeader">
      <div
        class="item"
        v-for="(item, index) in header"
        :key="index"
        :style="{ width: item.width }"
      >
        <div>{{ item.name }}</div>
        <div class="line"></div>
      </div>
      <div class="item" style="width: 193px">操作</div>
    </div>
    <div class="listBody">
      <div :class="['bodyLine']" v-for="(body, index) in rowData" :key="index">
        <div
          v-for="(self, ind) in header"
          :key="ind"
          :style="{ width: self.width }"
        >
          {{ body[self.key] }}
        </div>
        <div class="operation" style="width: 193px">
          <div
            v-if="
              isShow(
                userActive == 'user'
                  ? 'system:user:query' || 'system:user:edit'
                  : 'system:role:query' || 'system:role:edit'
              )
            "
            @click="edit(body)"
          >
            编辑
          </div>
          <div
            v-if="
              isShow(
                userActive == 'user'
                  ? 'system:user :remove'
                  : 'system:role:remove'
              )
            "
            @click="delet(body)"
          >
            删除
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import apiList from '@/pages/system/api/api'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const baseLeafletMapStore = useBaseLeafletMapStore()
const permissions = localStorage.getItem('userInfo')
const isShow = computed(() => data => {
  return permissions.includes(data) || permissions.includes('*:*:*')
})
const userActive = ref('user')
const operationType = ref('')
const roleHeader = ref([
  { name: '角色名称', width: '329px', key: 'roleName' },
  { name: '角色标识', width: '311px', key: 'roleKey' },
  { name: '排序', width: '279px', key: 'roleSort' },
  { name: '备注', width: '389px', key: 'remark' },
  { name: '操作', width: '192px' }
])
const userHeader = ref([
  {
    name: '用户',
    width: '213px',
    key: 'nickName'
  },
  {
    name: '账号',
    width: '213px',
    key: 'userName'
  },
  {
    name: '手机号',
    width: '213px',
    key: 'phonenumber'
  },
  {
    name: '性别',
    width: '213px',
    key: 'sex'
  },
  {
    name: '状态',
    width: '213px',
    key: 'status'
  },
  {
    name: '备注',
    width: '213px',
    key: 'remark'
  }
])
const switchTab = type => {
  userActive.value = type
  if (type == 'user') {
    getUserlistData()
  } else {
    getRolelistData()
  }
}
const header = computed(() => {
  let list = []
  if (userActive.value == 'user') {
    list = userHeader.value
  } else {
    list = roleHeader.value
  }
  return list
})
const rowData = ref([])
const getUserlistData = () => {
  apiList.getUserlist().then(res => {
    for (let item of res.rows) {
      item.sex = item.sex == 0 ? '男' : item.sex == 1 ? '女' : '未知'
      item.status = item.status == 0 ? '正常' : '停用'
    }
    rowData.value = res.rows
  })
}
const getRolelistData = () => {
  apiList.getRolelist().then(res => {
    rowData.value = res.rows
  })
}
//编辑
const edit = item => {
  useEventBus('handleStationDialogVisible').emit(true, {
    data: item,
    type: userActive.value,
    operation: 'edit'
  })
}
//删除
const delet = item => {
  ElMessageBox.alert(
    `确定要删除${userActive.value == 'user' ? '用户' : '角色'}`,
    '删除',
    {
      confirmButtonText: 'OK',
      callback: async () => {
        let delUser, delRole
        if (userActive.value == 'user') {
          delUser = await apiList.deletUser(item.userId)
        } else {
          delRole = await apiList.deletRole(item.roleId)
        }
        if (
          (delUser && delUser.code == 200) ||
          (delRole && delRole.code == 200)
        ) {
          ElMessage({
            message: '删除成功',
            type: 'success'
          })
          userActive.value == 'user' ? getUserlistData() : getRolelistData()
        } else {
          if (delUser) {
            ElMessage.error(delUser.msg)
          } else if (delRole) {
            ElMessage.error(delRole.msg)
          }
        }
      }
    }
  )
}
//新增
const add = () => {
  useEventBus('handleStationDialogVisible').emit(true, {
    data: null,
    type: userActive.value,
    operation: 'add'
  })
}

const refreshData = type => {
  type == 'user' ? getUserlistData() : getRolelistData()
}
useEventBus('handleRefreshData').on(refreshData)
onMounted(() => {
  if (permissions.includes('system:user:list')) {
    getUserlistData()
    userActive.value = 'user'
  } else if (permissions.includes('system:role:list')) {
    getRolelistData()
    userActive.value = 'role'
  } else {
    getUserlistData()
    userActive.value = 'user'
  }
})
</script>
<style scoped lang="scss">
.roleUserListWarp {
  width: 1500px;
  height: 720px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .listTab {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    .leftTab {
      width: 282px;
      height: 60px;
      display: flex;
      justify-content: flex-start;
      .role {
        width: 141px;
        box-shadow: inset 0px 0px 40px 1px #0090ff;
        border-radius: 0px 12px 0px 0px;
        border: 1px solid #008fc5;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
        font-size: 16px;
        color: #cadef9;
        cursor: pointer;
      }
      .user {
        width: 141px;
        box-shadow: inset 0px 0px 40px 1px #0090ff;
        border-radius: 12px 0px 0px 0px;
        border: 1px solid #008fc5;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
        font-size: 16px;
        color: #cadef9;
        cursor: pointer;
      }
      .userActive,
      .roleActive {
        background: #004ec0;
        box-shadow: 5px 0px 7px 1px rgba(0, 0, 0, 0.45),
          inset 0px 0px 26px 1px #00ceff;
        border-radius: 0px 12px 0px 0px;
        border: 1px solid #00d0f9;
      }
      .userActive {
        border-radius: 12px 0px 0px 0px;
      }
    }
    .rightAdd {
      width: 151px;
      height: 46px;
      background: url(./images/add.png) no-repeat;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 46px;
      text-align: center;
      cursor: pointer;
    }
  }
  .listHeader {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    background: #061935;
    box-shadow: inset 0px 0px 40px 1px #0090ff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #008fc5;
    .item {
      height: 100%;
      text-align: center;
      line-height: 60px;
      font-weight: 500;
      font-size: 16px;
      color: #cadef9;
    }
    .line {
      width: 1px;
      height: 20px;
      background-color: #00a5e4;
      float: right;
      margin-top: -39px;
    }
  }
  .listBody {
    width: 100%;
    height: calc(100% - 60px);
    .bodyLine {
      width: 100%;
      height: 60px;
      margin-bottom: 2px;
      background: rgba(0, 22, 44, 0.64);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #003c64;
      display: flex;
      cursor: pointer;
      div {
        text-align: center;
        line-height: 60px;
        font-weight: 300;
        font-size: 16px;
        color: #ffffff;
      }
      .operation {
        display: flex;
        justify-content: space-around;
      }
    }
    .bodyLine:hover {
      background: rgba(2, 69, 136, 0.96);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #006fb8;
    }
  }
}
</style>
